<template>
  <div class="main">
    <el-row
      class="noprint"
      style="
        margin-bottom: 10px;
        display: flex;
        justify-content: flex-end;
        border: none;
      "
    >
      <el-button v-if="showBase" v-print="print" type="primary">打印</el-button>
    </el-row>
    <div id="printArea">
      <div class="idea-title">西南交通大学引进人才评审表</div>
      <el-row v-if="showBase">
        <el-col :span="4">姓名</el-col>
        <el-col :span="4">{{ allData.personnel.name }} </el-col>
        <el-col :span="4">性别 </el-col>
        <el-col
          :span="4"
        >{{ allData.personnel.sex == "0" ? "男" : "女" }}
        </el-col>
        <el-col :span="4">出生日期</el-col>
        <el-col :span="4">{{ allData.personnel.birth_time }} </el-col>
      </el-row>
      <el-row v-if="showBase">
        <el-col :span="4">职称</el-col>
        <el-col :span="8">{{ allData.personnel.current_title }}</el-col>
        <el-col :span="4">学科专业</el-col>
        <el-col :span="8">{{ allData.personnel.school }} </el-col>
      </el-row>
      <el-row v-if="showBase">
        <el-col :span="4">研究方向</el-col>
        <el-col :span="8">{{ allData.personnel.research }} </el-col>
        <el-col :span="4">现工作单位 </el-col>
        <el-col :span="8">{{ allData.personnel.subject }} </el-col>
      </el-row>
      <el-row v-if="showBase" style="border-bottom: 1px solid #333">
        <el-col :span="4">拟聘学院</el-col>
        <el-col :span="8"> {{ allData.personnel.apply_college }} </el-col>
        <el-col :span="4">拟加入团队 </el-col>
        <el-col :span="8">{{ allData.personnel.apply_team }} </el-col>
      </el-row>
      <el-row class="school-idea">
        <div>
          <span>一、学院意见：</span>
          <span>{{
            allData.personnel.college_import == 1 ? "建议引进" : "不建议引进"
          }}</span>
        </div>
        <div class="hide">
          <el-link
            v-if="showBase"
            :underline="false"
            type="primary"
            @click="handlePreview"
          >点击查看学院意见</el-link>
        </div>
      </el-row>
      <!-- 专家评价情况 -->
      <div class="decision">
        <!-- 表格标题 -->
        <el-row>
          <div class="header" style="width: 100%">
            二、专家学术评价情况（得票数/专家数）{{
              allData.personnel.expert_starttime
                ? allData.personnel.expert_starttime
                : "***"
            }}
            ~
            {{
              allData.personnel.expert_endtime
                ? allData.personnel.expert_endtime
                : "***"
            }}
          </div>
        </el-row>
        <!-- 列标题 -->
        <el-row class="sub-header">
          <el-col :span="6">科研与学术水平 </el-col>
          <el-col :span="6">创新与发展潜力 </el-col>
          <el-col :span="6">竞争力与社会影响力 </el-col>
          <el-col :span="6">综合评价 </el-col>
        </el-row>
        <!-- 评价选项内容 -->
        <el-row v-for="(item, index) in keyMenu" :key="index" class="body">
          <el-col :span="6">
            <div>{{ item }}（{{ allData.census.level[item].census }}）</div>
            <div>{{ allData.census.level[item].name.join("、") }}</div>
          </el-col>
          <el-col
            :span="6"
          ><div>
             {{ item }}（{{ allData.census.potential[item].census }}）
           </div>
            <div>{{ allData.census.potential[item].name.join("、") }}</div>
          </el-col>
          <el-col
            :span="6"
          ><div>{{ item }}（{{ allData.census.effect[item].census }}）</div>
            <div>{{ allData.census.effect[item].name.join("、") }}</div>
          </el-col>
          <el-col
            :span="6"
          ><div>{{ item }}（{{ allData.census.multiple[item].census }}）</div>
            <div>{{ allData.census.multiple[item].name.join("、") }}</div>
          </el-col>
        </el-row>
        <!-- 引进 -->
        <el-row class="introduce">
          <el-col :span="12">是否建议引进</el-col>
          <el-col :span="12">
            <div class="support">
              <div>是（{{ allData.census.introduction["是"].census }}）</div>
              <div style="margin-top: 10px; font-weight: 400">
                {{ allData.census.introduction["是"].name.join("、") }}
              </div>
            </div>
            <div class="oppose">
              <div>否（{{ allData.census.introduction["否"].census }}）</div>
              <div style="margin-top: 10px; font-weight: 400">
                {{ allData.census.introduction["否"].name.join("、") }}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 人才引进评审情况 -->
      <div class="decision">
        <!-- 表格标题 -->
        <el-row>
          <div class="header" style="width: 100%">
            三、人才引进评审委员会评审意见
            {{
              allData.personnel.judges_starttime
                ? allData.personnel.judges_starttime
                : "***"
            }}
            ~
            {{
              allData.personnel.judges_endtime
                ? allData.personnel.judges_endtime
                : "***"
            }}
          </div>
        </el-row>
        <!-- 列标题 -->
        <el-row class="sub-header">
          <el-col :span="4">是否同意引进 </el-col>
          <el-col :span="5">职称认定 </el-col>
          <el-col :span="5">岗位等级 </el-col>
          <el-col :span="5">导师资格 </el-col>
          <el-col :span="5">是否解决配偶工作 </el-col>
        </el-row>
        <!-- 评价选项内容 -->
        <el-row
          v-for="(item, index) in 4"
          :key="index + 'option1'"
          class="body"
        >
          <el-col :span="4">
            <div
              v-if="allData.judges_census.introduction[introductionKey[index]]"
            >
              {{ introductionKey[index] }}（{{
                allData.judges_census.introduction[introductionKey[index]]
                  ? allData.judges_census.introduction[introductionKey[index]]
                    .census
                  : ""
              }}）
            </div>
            <div
              v-if="allData.judges_census.introduction[introductionKey[index]]"
            >
              {{
                allData.judges_census.introduction[introductionKey[index]]
                  ? allData.judges_census.introduction[
                    introductionKey[index]
                  ].name.join("、")
                  : ""
              }}
            </div>
          </el-col>
          <el-col
            :span="5"
          ><div>
             {{ maintainKey[index] }}（{{
               allData.judges_census.maintain[maintainKey[index]].census
             }}）
           </div>
            <div>
              {{
                allData.judges_census.maintain[maintainKey[index]].name.join(
                  "、"
                )
              }}
            </div>
          </el-col>
          <el-col
            :span="5"
          ><div>
             {{ gradeKey[index] }}（{{
               allData.judges_census.grade[gradeKey[index]].census
             }}）
           </div>
            <div>
              {{ allData.judges_census.grade[gradeKey[index]].name.join("、") }}
            </div>
          </el-col>
          <el-col
            :span="5"
          ><div v-if="allData.judges_census.seniority[seniorityKey[index]]">
             {{ seniorityKey[index] }}（{{
               allData.judges_census.seniority[seniorityKey[index]].census
             }}）
           </div>
            <div v-if="allData.judges_census.seniority[seniorityKey[index]]">
              {{
                allData.judges_census.seniority[seniorityKey[index]].name.join(
                  "、"
                )
              }}
            </div>
          </el-col>
          <el-col
            :span="5"
          ><div v-if="allData.judges_census.spouse[spouseKey[index]]">
             {{ spouseKey[index] }}（{{
               allData.judges_census.spouse[spouseKey[index]].census
             }}）
           </div>
            <div v-if="allData.judges_census.spouse[spouseKey[index]]">
              {{
                allData.judges_census.spouse[spouseKey[index]].name.join("、")
              }}
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 费用表格 -->
      <div class="money" style="margin-top: 12px">
        <el-row class="header">
          <el-col :span="3">学校标准</el-col>
          <el-col :span="7">
            <span>年薪</span>
            <span>{{ allData.treatment.year_salary }}</span>
          </el-col>
          <el-col :span="7">
            <span>安家费</span>
            <span>{{ allData.treatment.settle_down }}</span></el-col>
          <el-col :span="7">
            <span>科研启动费</span>
            <span>{{ allData.treatment.startup }}</span></el-col>
        </el-row>
        <el-row class="appeal">
          <el-col :span="3">个人诉求</el-col>
          <el-col :span="7"> {{ allData.personnel.year_salary }} </el-col>
          <el-col :span="7"> {{ allData.personnel.settle_down }}</el-col>
          <el-col :span="7"> {{ allData.personnel.startup }}</el-col>
        </el-row>
        <el-row class="appeal">
          <el-col :span="3">决策意见</el-col>
          <el-col :span="7">
            <div
              v-for="(item, index) in allData.judges_census.year_salary.name"
              :key="index"
            >
              <span>{{ item.nickname }}{{ item.year_salary_proposal }}</span>
            </div>
          </el-col>
          <el-col :span="7">
            <div
              v-for="(item, index) in allData.judges_census.settle_down.name"
              :key="index"
            >
              <span>{{ item.nickname }}{{ item.settle_down_proposal }}</span>
            </div>
          </el-col>
          <el-col :span="7">
            <div
              v-for="(item, index) in allData.judges_census.startup.name"
              :key="index"
            >
              <span>{{ item.nickname }}{{ item.startup_proposal }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row class="remark" style="border-bottom: 1px solid #333">
          <div>注意：决策意见将作为学校与引聘对象对接洽谈的参考值</div>
        </el-row>
      </div>
      <!-- 专家评审意见区域 -->
      <div class="idea-title">
        西南交通大学引进人才评审意见表
      </div>
      <!-- 专家建议表格 -->
      <div class="idea-table">
        <el-row>
          <el-col :span="3">姓名</el-col>
          <el-col :span="3">{{ allData.personnel.name }}</el-col>
          <el-col :span="3">性别</el-col>
          <el-col :span="3">{{
            allData.personnel.sex == 0 ? "男" : "女"
          }}</el-col>
          <el-col :span="3">年龄</el-col>
          <el-col :span="3">{{ allData.personnel.age }}</el-col>
          <el-col :span="3">职称</el-col>
          <el-col :span="3">{{ allData.personnel.current_title }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">学科</el-col>
          <el-col :span="3">{{ allData.personnel.school }}</el-col>
          <el-col :span="3">研究领域</el-col>
          <el-col :span="15">{{ allData.personnel.research }}</el-col>
        </el-row>
        <el-row
          style="
            justify-content: center;
            font-size: 20px;
            text-align: center;
            min-height: 56px;
            line-height: 56px;
          "
        >
          学术评价专家意见或建议
        </el-row>
        <el-row
          v-for="(item, index) in allData.expert_name"
          :key="index + 'idea'"
          class="idea-item"
        >
          <el-col :span="6">{{ item.name }}</el-col>
          <el-col :span="18">{{ item.opinion }}</el-col>
        </el-row>
        <el-row
          style="
            justify-content: center;
            font-size: 20px;
            text-align: center;
            height: 56px;
            line-height: 56px;
          "
        >
          人才引进评审委员会意见或建议
        </el-row>
        <el-row
          v-for="(item, index) in allData.judges"
          :key="index + 'judges'"
          class="idea-item"
        >
          <el-col :span="6">{{ item.nickname }}</el-col>
          <el-col :span="18">{{ item.opinion }}</el-col>
        </el-row>
        <el-row
          style="
            justify-content: center;
            font-size: 20px;
            text-align: center;
            height: 56px;
            line-height: 56px;
          "
        >
          人才办（管理员）意见或建议
        </el-row>
        <el-row
          class="idea-item"
        >

        
          <el-col :span="24">{{ allData.personnel.manage_opinion }}</el-col>
        </el-row>
      </div>
    </div>

    <el-dialog
      width="80%"
      title="学院意见"
      :visible.sync="innerVisible"
      append-to-body
    >
      <img
        class="idea-img"
        :src="baseUrl + allData.personnel.college_opinion"
        alt=""
      >
    </el-dialog>
  </div>
</template>

<script>
export default {
  filters: {
    formatData (e) {
      const strArr = []
      e.forEach((item) => {
        const str1 = item.year_salary_proposal
          ? item.year_salary_proposal
          : item.settle_down_proposal
            ? item.settle_down_proposal
            : item.startup_proposal
              ? item.startup_proposal
              : ''
        const str = item.nickname + str1
        strArr.push(str)
      })
      return strArr.join('、')
    }
  },
  props: {
    allData: {
      type: Object,
      default () {
        return {}
      }
    },
    showBase: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      keyMenu: ['优秀', '良好', '中等', '一般'],
      introductionKey: ['是', '否'],
      maintainKey: ['教授', '研究员', '副教授', '副研究员'],
      gradeKey: ['二级', '三级', '四级', '五级'],
      seniorityKey: ['博导,硕导', '硕导'],
      spouseKey: ['是', '否'],
      baseUrl: process.env.VUE_APP_BASE_API,
      innerVisible: false,
      print: {
        id: 'printArea',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback () {}, // 预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback () {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback () {}, // 开启打印前的回调事件
        openCallback () {}, // 调用打印之后的回调事件
        closeCallback () {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: ''
      },
      opinion_input:''
    }
  },
  methods: {
    handlePreview () {
      this.innerVisible = true
    }
  },

}
</script>
<style lang="scss" scoped>
.el-row {
  display: flex;
  flex-wrap: nowrap;
}
.el-row {
  font-size: 16px;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  color: #333333;
  border: 1px solid #333;
  border-bottom: none;
  min-height: 40px;
  .el-col {
    display: flex;
    align-items: center;
    justify-content: center;
    // height: 100%;
    // width: 100%;
    // text-align: center;
    // line-height: 40px;
    border-right: 1px solid #333;
    &:nth-last-child(1) {
      border-right: none;
    }
    &:nth-last-child(2n + 1) {
      // color: #ff0913;
    }
  }
}

.decision {
  margin-top: 16px;
  .title {
    min-height: 35px;
    text-align: center;
    font-size: 20px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
  }

  .el-row {
    display: flex;
    border: 1px solid #333;
    border-bottom: none;
    &:nth-last-child(1) {
      border-bottom: 1px solid #333;
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: center;
      // text-align: center;
      font-size: 18px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
      min-height: 40px;
      // line-height: 40px;
      background-color: #e9eff9;
    }
    .el-col {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      // text-align: center;
      border-right: 1px solid #333;
      &:nth-last-child(1) {
        border-right: none;
      }
    }
    &.sub-header {
      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        color: #333333;
        min-height: 40px;
      }
    }
    &.body {
      font-size: 16px;
      .el-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 70px;
        // min-height: 70px;
        // line-height: 20px;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #333333;
        div:nth-child(2) {
          // color: #ff0913;
          // margin-top: 10px;
        }
        // line-height: 70px;
      }
    }
    &.introduce {
      // min-height: 70px;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
      border-bottom: 1px solid #333;
      // line-height: 70px;
      .el-col {
        min-height: 70px;
        &:nth-child(1) {
          // line-height: 70px;
        }
        &:nth-child(2) {
          display: flex;
          align-items: center;
          justify-content: space-around;
          // line-height: 20px;
        }
      }
    }
    &.specialist-header {
      margin-top: 8px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
    }
    &.specialist-body {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      .el-col {
        &:nth-child(n + 2) {
          // color: #ff0913;
        }
      }
    }
  }
}

.money {
  background-color: #e9eff9;
  .header {
    .el-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // line-height: 28px;
      min-height: 80px;
      font-size: 18px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
    }
  }
  .appeal {
    .el-col {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 80px;
      font-size: 18px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
      &:nth-child(1) {
        font-weight: 400;
      }
    }
  }
  .idea {
    .el-col {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: center;
      min-height: 100px;
      // line-height: 30px;
      padding: 10px;
      box-sizing: border-box;

      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #333333;
      &:nth-child(1) {
        align-items: center;
        font-size: 18px;
        font-weight: 400;
      }
    }
  }
  .remark {
    min-height: 100px;
    div {
      min-height: 100px;
      padding: 10px;
      box-sizing: border-box;
      // line-height: 22px;
    }
  }
}

.idea-title {
  padding: 30px 0;
  text-align: center;
  font-size: 24px;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  color: #333333;
}
.idea-table {
  .idea-item {
    .el-col {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      &:nth-child(2) {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 10px;
        // line-height: 22px;
      }
    }
    &:nth-last-child(1) {
      border-bottom: 1px solid #333;
    }
  }
}

.school-idea {
  // justify-content: center;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding-left: 10px;
  margin-top: 30px;
  min-height: 40px;
  // line-height: 40px;
  font-size: 18px;
  font-size: 400;

  // font-weight: 600;
  border-bottom: 1px solid #333;
}
.school-content {
  display: flex;
  align-items: center;
  // flex-direction: column;
  // height: 150px;
  // img {
  //   margin-bottom: 10px;
  //   width: 200px;
  //   height: 100px;
  // }
}
.idea-img {
  width: 100%;
  height: 100%;
}
</style>

<style media="print" lang="scss">
@page {
  size: auto;
  margin: 3mm;
}
@media print {
  html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
  }

  body {
    border: solid 1px #ffffff;
    margin: 10mm 15mm 10mm 15mm;
  }
  .hide {
    display: none;
    
  }
}
</style>
